<template>
  <div class="weibo">
    <div class="weibo-info" v-if="!simple">
      <div style="margin-bottom: 5px">
        <div @click="showDetails(item)" class="weibo-img inline">
          <zz-user class="inline" :srcProps="item.mPic" width="50"></zz-user>
        </div>
        <div class="inline v-top">
          <p style="margin-top: 4px">
            <b>{{item.mName}}</b>
            <!--<button class="liaotian_button">聊天</button>-->
          </p>
          <small class="weibo-time inline">{{item.gmtCreate | date('YYYY-MM-DD  HH:mm')}} <span style="margin-left: 10px;" v-if="item.source">来自{{item.source}}</span></small>
        </div>
        <i class="iconfont icon-mima right" v-if="item.isPublic === 2">仅@的人可见</i>
      </div>
      <div v-if="item[customize]" v-html="item[customize]"></div>
      <zz-content
        :mans="item.tMans"
        :departs="item.atdps"
        :content="item.content"></zz-content>
      <zz-preview
        margin="10px 10px 0 0"
        v-for="file in imgList"
        :item="file"
        :info=true
        :key="file.id"
        :isAuth = true
        :th = 2
        :items = imgList
        :multiple="item.files.length > 1"
        imgWidth="185px" ></zz-preview>
      <p v-if="isPosition" class="mt15"><i class="iconfont icon-sign grid"><small>{{item.position}}</small></i></p>
       <div>
         <zz-preview
           margin="10px 10px 0 0"
           v-for="file in fileList"
           :item="file"
           :info=true
           :key="file.id"
           :isAuth = true
           :th = 2
           imgWidth="185px" ></zz-preview>
       </div>
    </div>

    <div class="weibo-chat" :class="{'none-padding': simple}">
      <div class="weibo-i" v-if="!simple">
        <i class="iconfont icon-msg" @click="comments"><span style="margin-left: 4px;">评论({{item.replyCnt}})</span></i>
        <i
          @click="fromAddPraise"
          class="iconfont icon-zan"
          v-if="item.isPraised === 0"><span style="margin-left: 4px;">赞({{item.praiseCnt}})</span></i>
        <i
          @click="fromDeletePraise"
          class="iconfont icon-zan"
          v-if="item.isPraised === 1"><span style="margin-left: 4px;">取消赞({{item.praiseCnt}})</span></i>
        <i
          v-if="item.customizeButton && item.customizeButton.length > 0"
          v-for="button in item.customizeButton"
          class="iconfont"
          :class="button.icon"
          @click="customizeButtonHandle(button)">{{button.name}}</i>
        <i class="iconfont icon-delete" v-if="item.isDelete || isDelete" @click="delShare"><span style="margin-left: 4px;">删除</span></i>
      </div>
      <div class="weibo-praise mt20 mb20" v-if="showRevert && !simple">
        <div class="weibo-zan"><i class="iconfont icon-zan"></i></div>
        <zz-user
          class="inline"
          width="30"
          v-for="item in plist"
          :key="item.mid"
          :srcProps="item.rpPic"></zz-user>
      </div>
      <div class="revert-com"
           @mouseenter="child.show = true"
           @mouseleave="child.show = false"
           v-if="showRevert"
           v-for="child in reverseReplyChildList"
           :key = "child.rpId">
        <div class="revert-img"  @click.stop="showDetails(child)">
          <zz-user :srcProps="child.mLogo || child.rpPic"></zz-user>
        </div>
        <div class="revert-right">
          <div class="revert-name left">
            <div class="mr10">
              <div class="mr5 " style="display: inline">
                <p class="inline color" @click.stop="showDetails(child)">{{child.rpName}}</p>
                <span v-if="child.upReplyId || child.upId">
                <span>回复</span>
                <p class="color inline">{{ child.upReplyer }} </p>
              </span>
                <span>:</span>
              </div>
              <zz-content style="margin-top: -1px; display: inline"  :content="child.content" :mans="child.atmans" :departs="child.atdps"></zz-content>
            </div>
          </div>
          <div class="revert-file">
            <zz-preview
              v-for="childFile in child.files"
              :item="childFile"
              :info= true
              :key="childFile.id"
              :th = 4>
            </zz-preview>
          </div>
          <div class="revert-time">
            <small>{{child.gmtCreate | date('MM-DD HH:mm')}}</small>
            <i key="1"
               v-if="child.show"
               class="iconfont icon-msg"
               title="消息"
               @click="showReply(child)"></i>
            <i key="2"
               v-if="child.show"
               class="iconfont icon-delete"
               title="删除"
               @click="delReply(child, 2)"></i>
          </div>
        </div>
      </div>
      <zz-talk
        class="revert-com mt20"
        holder="说点什么吧..."
        background="#fff"
        :isWeqiaNo="isWeqiaNo"
        :isBorder="isBorder"
        :isFocus="false"
        :auth="auth"
        :isSimple = isSimple
        :upReplyId="upReplyId"
        :upReplyName = upReplyName
        :parentId="item.rpId"
        :isUpload="isUpload"
        :isAtAll = isAtAll
        :isAt="isAt"
        @handleFocus="handleFocus"
        @delReplyName="upReplyName = '', upReplyId = ''"
        @sendData="subData"></zz-talk>
    </div>

    <div class="weibo-right">
      <slot name="right" :item="item"></slot>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'zz-weibo',
  data () {
    return {
      item: {},
      visible: false,
      upReplyVisible: true,
      reply: false,
      isSimple: true,
      upReplyId: '',
      upReplyName: '',
      showRevert: false,
      plist: [],
      imgList: [],
      fileList: [],
      replyChildList: []
    }
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser'
    }),
    reverseReplyChildList () {
      return this.replyChildList.reverse()
    }
  },
  props: {
    option: {},
    form: {
      type: String
    },
    isAtAll: {
      type: Boolean,
      default: true
    },
    isAt: {
      type: Boolean,
      default: true
    },
    isWeqiaNo: {
      type: Boolean,
      default: false
    },
    isBorder: {
      type: Boolean,
      default: false
    },
    // 自定义提交from name
    formName: {
      type: String
    },
    query: {
      type: String
    },
    // 是否打开上传
    isUpload: {
      type: Boolean,
      default: false
    },
    // 提交内容接口
    subUrl: '',
    // 是否显示删除
    isDelete: {
      type: Boolean,
      default: true
    },
    // 删除内容接口
    delUrl: '',
    // 删除内容参数
    delQuery: '',
    // 请求子回复列表内容接口
    childUrl: '',
    // 请求子回复列表参数
    childQuery: '',
    // 删除子回复接口
    delChildUrl: '',
    // 赞接口
    addPraise: '',
    // 取消赞接口
    deletePraise: '',
    // 简单模式
    simple: {
      type: Boolean,
      default: false
    },
    // 是否自动展开子评论
    isSpreadOut: {
      type: Boolean,
      default: false
    },
    // 自定义内容
    customize: {
      type: String,
      default: ''
    },
    // 是否开启地点显示
    isPosition: {
      type: Boolean,
      default: false
    },
    // 是否跳到详情
    routeDetail: {
      type: Boolean,
      default: true
    },
    // @成员权限
    auth: null,
    // 删除评论时的message 提示语
    message: {
      type: String,
      default: '确认删除该分享?'
    }
  },
  watch: {
    option: {
      handler (data) {
        this.item = data
      },
      deep: true
    }
  },
  mounted () {
    this.item = this.option
    this.setFileType()
    if (this.simple) {
      this.queryMsgList()
    }
    this.$nextTick(() => {
      if (this.isSpreadOut) {
        this.comments()
      }
    })
  },
  methods: {
    setFileType () {
      if (this.item.files && this.item.files.length > 0) {
        this.item.files.forEach(item => {
          if (item.type === 1) {
            this.imgList.push(item)
          } else {
            this.fileList.push(item)
          }
        })
      }
    },
    subData (obj) {
      let formName = 'form'
      if (this.formName) {
        formName = this.formName
      }
      const form = {}
      form[`${formName}.fileUuids`] = obj.files
      form[`${formName}.reply_content`] = obj.value
      form[`${formName}.up_reply_id`] = obj.upReplyId
      form[this.form] = this.item.msgId
      this.$axios({
        method: 'post',
        url: this.subUrl,
        data: this.$qs.stringify(form, {indices: false})
      }).then(res => {
        if (res.data.errorMsg) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.upReplyName = ''
          this.upReplyId = ''
          this.queryMsgList()
        }
      }, err => {
        this.$message.error(err)
      })
    },
    showReply (node) {
      this.upReplyName = node.rpName
      this.upReplyId = node.replyId
    },
    revertShow () {
      // 是否有子回复人
      if (this.upReplyName) {
        this.upReplyName = ''
        this.upReplyId = ''
        return
      }
      this.visible = !this.visible
      if (this.visible) {
        this.queryMsgList()
        this.upReplyVisible = true
      } else {
        this.upReplyVisible = false
      }
    },
    delReply (reply) {
      const data = {}
      if (Array.isArray(this.delQuery)) {
        this.delQuery.forEach(item => {
          data[item.value] = reply[item.key]
        })
      } else {
        data[this.delQuery] = reply.replyId
      }
      this.$axios({
        method: 'post',
        url: this.delChildUrl,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorMsg) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.$message.success('删除成功！')
          this.queryMsgList()
        }
      })
    },
    comments () {
      this.isSimple = !this.isSimple
      if (!this.isSimple) {
        this.queryMsgList()
      } else {
        this.showRevert = false
      }
    },
    handleFocus () {
      this.isSimple = false
      this.showRevert = true
      if (this.replyChildList.length === 0) {
        this.queryMsgList()
      }
    },
    queryMsgList () {
      this.showRevert = true
      const data = {
        'query.parent_id': this.item.rpId,
        'query.pageSize': 100
      }
      data[this.childQuery] = this.item.msgId
      this.$axios({
        method: 'post',
        url: this.childUrl,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorMsg) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.success(res)
        }
      }, err => {
        this.$message.error(err)
      })
    },
    success (res) {
      this.replyChildList = []
      this.plist = res.data.plist
      const list = res.data.list || res.data.rlist
      list.forEach(item => {
        this.$set(item, 'show', false)
        this.replyChildList.push(item)
      })
      if (this.plist) {
        this.item.praiseCnt = this.plist.length
      }
      this.item.replyCnt = list.length
    },
    // 赞
    fromAddPraise () {
      const data = {}
      data[this.childQuery] = this.item.msgId
      this.$axios({
        method: 'post',
        url: this.addPraise,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorMsg) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.item.isPraised = 1
          this.item.praiseCnt++
          this.plist.push({
            mid: this.currentUser.mid,
            rpPic: this.currentUser.mLogo
          })
        }
      })
    },
    // 取消赞
    fromDeletePraise () {
      const data = {}
      data[this.childQuery] = this.item.msgId
      this.$axios({
        method: 'post',
        url: this.deletePraise,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorMsg) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.item.isPraised = 0
          this.item.praiseCnt--
          for (let i = 0; i < this.plist.length; i++) {
            if (this.plist[i].mid === this.currentUser.mid) {
              this.plist.splice(i, 1)
              break
            }
          }
        }
      })
    },
    // 删除分享
    delShare () {
      this.$MessageBox({
        showClose: true,
        message: this.message,
        type: 'info',
        confirmHanler: () => {
          const data = {}
          data[this.query] = this.item.msgId
          this.$axios({
            method: 'post',
            url: this.delUrl,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              this.$message.success('删除成功')
              this.$emit('success')
            }
          })
        }
      })
    },
    // 跳转至个人主页
    showDetails (item) {
      if (this.routeDetail) {
        this.$router.push({name: 'homepage', query: {wid: item.wid, company_id: item.gCoId}})
      }
    },
    // 自定义按钮事件
    customizeButtonHandle (node) {
      const obj = {...this.item, ...node}
      this.$emit('button', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
  .weibo{
    margin:5px 0;
    position: relative;
    .weibo-info{
      padding: 15px 20px 8px 20px;
      .weibo-img{
        cursor:pointer;
      }
      .liaotian_button{
        height: 20px;
        text-align: center;
        font-size: 12px;
        border: 1px $color-line solid;
        background: none;
        margin: 0 5px 0 5px;
        cursor: pointer;
        &:hover{
          border: 1px $color solid;
          color: $color;
        }
      }
      .icon-mima{
        font-size: $font-size-smallest;
      }
      .weibo-time{
        margin-top: 8px;
      }
      .color{
        cursor: text;
        &:hover{
          color: $color;
        }
      }
    }
    .weibo-chat{
      padding: 15px 15px 5px 15px;
      margin: 0 20px;
      background: $color-bg;
      border: 1px $color-line solid;
      .weibo-i{
        i{
          color: $color;
          cursor: pointer;
          font-size: $font-size-smallest;
          margin-right: 20px;
          &:hover{
            color: $color-hover;
          }
        }
      }
      .weibo-praise{
        .weibo-zan{
          width: 30px;
          height: 30px;
          line-height: 30px;
          border: 1px $color-line solid;
          background: #fff;
          border-radius: 3px;
          text-align: center;
          display: inline-block;
          vertical-align: top;
          box-sizing: border-box;
          .icon-zan{
            color: #aaa;
          }
        }
      }
      .reply{
        display: table;
        width: 100%;
        padding: 1rem 0 0.8rem;
        border-bottom: 1px dashed $color-line;
        &:last-child{
          border-bottom: none;
        }
        .reply-img{
          display: table-cell;
          width: 40px;
          img{
            width:40px;
            height:40px;
          }
        }
        .reply-com{
          display: table-cell;
          vertical-align: top;
          padding-left: 10px;
          color: #999;
          .reply-man{
            .reply-man-span{
              font-size: $font-size-small;
              color: $color-grid;
            }
            .reply-man-com{
              font-size: $font-size-small;
              color: #7d807f;
            }
          }
          .reply-text{
            margin-top: 0.3rem;
          }
          .reply-time{
            height: 13px;
            margin-top:0.5rem;
            font-size: 0.75rem;
            .iconfont{
              cursor: pointer;
              font-size: 0.9rem;
              margin-left: 15px;
              &:hover{
                color: $color;
              }
            }
          }
        }

      }
      .revert-com{
        margin-top: 8px;
        display: table;
        width: 100%;
        padding-bottom: 0;
        .revert-img{
          width: 35px;
          display: table-cell;
          vertical-align: top;
          .icon-user{
            font-size: 1.2rem;
          }
          img{
            width: 40px;
            height: 40px;
          }
        }
        .revert-right{
          display: table-cell;
          .revert-name{
            display: table-cell;
            span{
              color: #999;
            }
          }
          .revert-file{
            display: table-cell;
          }
          .revert-time{
            margin-top: 3px;
            .iconfont{
              color: $color;
              font-size: $font-size-smallest;
              margin-left: 0.5rem;
              cursor: pointer;
            }
          }
        }
        .revert-editor{
          .editor{
            @include input-b(98.5%, 167px)
          }
        }
      }
    }
    .weibo-right{
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .none-padding{
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
  }
</style>
